<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录界面</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <!-- 引入JQuery  bootstrap.js-->
    <script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        ///登录信息提示
        $(function(){

            $("#password").blur(function () {
                $("#password1").empty();

                var pass=$(this).val();
                if(pass==""||pass==null)
                {
                    $("#password").after("<span id='password1' style='color:red'>密码不能为空</span>");
                }
            });

            $("#username").blur(function () {
                $("#name6").empty();

                var username=$(this).val();
                if(username==""||username==null)
                {
                    $("#username").after("<span id='name6' style='color:red'>用户名不能为空</span>");
                }
            });


        })

    </script>

    <script type=text/javascript>
         if('${errorMsg}'!=''){
            alert('${errorMsg}');
        }
         if('${message}'!=''){
             alert('${message}');
         }



    </script>


    <style type="text/css">

        h1{
            text-align: center;
        }
        #login-box {
            /*border:1px solid #F00;*/
            padding: 35px;
            border-radius:15px;
            background: #56666B;
            color: #fff;
        }

    </style>
</head>
<body style="background-image: url(<%=request.getContextPath()%>/images/3.jpg) ">

         <h1><font color="#f0f8ff" >小学生数学技能竞赛后台管理</font></h1>
                   <h1><font color="#f0f8ff">登录页面</font> </h1>
         <div class="container" id="top">
             <div class="row" style="margin-top: 100px; ">
                 <div class="col-md-4"></div>
                 <div class="col-md-4" id="login-box">
                     <form class="form-horizontal" role="form"  id="form1" method="post" action="<%=request.getContextPath()%>/login">
                         <div class="form-group">
                             <label for="username" class="col-sm-3 control-label">用户名</label>
                             <div class="col-sm-9">
                                 <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="password" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;码</label>
                             <div class="col-sm-9">
                                 <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
                             </div>
                         </div>
                         <div class="form-group">
                             &nbsp; &nbsp; &nbsp; &nbsp;
                             <input id="alogin1" type="checkbox" value="1" name="state"/>7天自动登录

                         </div>

                         <div class="form-group pull-right" style="margin-right: 50px;">
                             <div class="col-sm-offset-2 col-sm-10">
                                 <%--onclick="window.location.href='/user/regist'"--%>
                                 <button type="button" class="btn btn-default btn-info" data-target="#register" data-toggle="modal">注册</button>


                             </div>
                         </div>
                         <div class="form-group pull-right" style="margin-right: 50px;">
                             <div class="col-sm-offset-2 col-sm-10">
                                 <button type="submit" class="btn btn-default btn-info"  id="submitBtn)">登录</button>
                             </div>
                         </div>
                     </form>
                 </div>
                 <div class="col-md-4"></div>
             </div>
         </div>



<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册页面</h1>
            </div>
            <div class="modal-body">


                    <div class="form-group">
                        <label for="name3">用户名</label>
                        <input class="form-control" type="text" placeholder="请输入用户名" name="name" id="name3" required=true onblur="user2()">
                    </div>

                    <div class="form-group">
                        <label class="control-label">性别</label>
                        <br>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="男" checked="checked">男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="女">女
                        </label>
                    </div>

                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password" placeholder="请输入密码" name="password" id="password2" required=true onblur="pass1()">
                    </div>

                <div class="form-group">
                    <label>再输入密码</label>
                    <input class="form-control" type="password" placeholder="请再输入密码" name="password" id="password3" required=true onblur="pass2()">
                </div>

                    <div class="text-right">
                        <button class="btn btn-primary" onclick="doRegist()">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>

            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">



    //实现注册功能
     function doRegist(){
     var name=$("#name3").val();
     var sex =$("input[name=sex]:checked").val();
     var password=$("#password2").val();
     var password2=$("#password3").val();
     if(name==""||name==null){
         alert("用户名不能为空！！");
         return false;
     }
       else if(password==""||password==null){
         alert("密码不能为空！！");
         return false;
     }
     else if(password!=password2){
         alert("两次输入密码不一致！！");
         return false;
     }


         var deRegist = confirm("是否确认注册该用户?");
if(deRegist==true) {
    $.ajax({
        url: "<%=request.getContextPath()%>/doRegister",
        type: "post",
        async: false,
        data: {"name": name, "sex": sex, "password": password},
        dataType: 'text',//返回数据不执行success方法而执行error时注意返回的格式问题
        success: function (data) {
            if (data == "ok") {
                alert("注册成功!");
                location.reload();//刷新页面
            }
            else {
                alert("注册失败!");
                location.reload();//刷新页面
            }


        },
        error: function (data) {
            alert("操作异常" + data.responseText)
        }
    })
}else{
    return false;
}
     }
     //判断用户名是否注册
    function user2(){
        var name1=$("#name3").val();

        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/adminValidate",//提交地址
            data:{"name":name1},//提交数据
            dataType:"text",//返回json格式
            //contentType:"application/json;charset=utf-8",
            success:function(data){

                $("#admin1").empty();
                if (data=="ok") {//后端传来的msg的值是no,不能注册。反之。

                    $("#name3").after("<span id='admin1' style='color:red'>该用户已被注册！</span>");
                    // $("#remind").html("<font color='red'>抱歉，该用户已被注册，请更换！</font>");
                }else if (name1==""||name1==null) {
                    $("#name3").after("<span id='admin1' style='color:red'>用户名不能为空！</span>");
                }
            },
            error:function (data) {
                alert("操作错误");
            }
        });
    }

    //判断密码输入的格式
    function pass1(){
         var password1=$("#password2").val();
         $("#pass3").empty();
         if(password1==""||password1==null){
             $("#password2").after("<span id='pass3' style='color:red'>密码不能为空！</span>");
         }
         else if(password1.length<6||password1.length>8){
             $("#password2").after("<span id='pass3' style='color:red'>密码长度在6-8之间！</span>");
         }
    }


    //判断两次的密码是否一致
    function pass2(){

         var password1=$("#password2").val();
         var password2=$("#password3").val();
        $("#pass4").empty();
         if(password1!=password2){
             $("#password3").after("<span id='pass4' style='color:red'>输入两次的密码不一致!</span>");
         }

    }


</script>

</html>